<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">商品管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>分类参数</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 面板 -->
        <el-card class="box-card" style="margin-top:20px">
            <el-alert
                title="只允许添加三级分类的参数"
                type="warning"
                show-icon>
            </el-alert>
            <el-row style="margin:20px 8px">
                <el-col style="margin-bottom:20px">
                    <span style="margin-right:20px">选择商品分类</span>
                    <!-- 级联选择器 -->
                    <el-cascader
                        v-model="cateSelected"
                        :options="categoriseList"
                        :props="cateCascader"
                        expand-trigger='hover'
                        @change="CateChange"
                        clearable></el-cascader>
                </el-col>
            </el-row>
            <!-- 标签页 -->
            <template>
                <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                    <el-tab-pane label="动态参数" name="many">
                        <el-button type="primary" :disabled='isBtnDisabled' style="margin-bottom:20px" @click="showAddAttr">动态参数</el-button>
                        <template>
                            <el-table :data="manyTableList" style="width: 100%" border>
                                <!-- 展开行 -->
                                <el-table-column type='expand'>
                                    <template slot-scope="scope">
                                        <el-tag :key="index" v-for="(item,index) in scope.row.attr_vals" closable @close='del(index,scope.row)' style="margin-right:10px">
                                            {{item}}
                                        </el-tag>
                                        <el-input
                                        class="input-new-tag"
                                        v-if="scope.row.inputVisible"
                                        v-model="scope.row.inputValue"
                                        ref="saveTagInput"
                                        size="small"
                                        @keyup.enter.native="handleInputConfirm(scope.row)"
                                        @blur="handleInputConfirm(scope.row)"
                                        style="width:120px">
                                        </el-input>
                                        <el-button v-else class="button-new-tag" size="small" @click="showInput(scope.row)">+ New Tag</el-button>
                                    </template>
                                </el-table-column>
                                <el-table-column type='index'></el-table-column>
                                <el-table-column prop="attr_name" label="参数名称" width="1100">
                                </el-table-column>
                                <el-table-column label="操作" width="276">
                                    <template slot-scope='scope'>
                                        <el-button type="primary" icon="el-icon-edit" @click="editAttr(scope.row)">编辑</el-button>
                                        <el-button type="danger" icon="el-icon-delete" @click="deleteAttr(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                    <el-tab-pane label="静态属性" name="only">
                        <el-button type="primary" :disabled='isBtnDisabled' style="margin-bottom:20px" @click="showAddAttr">静态属性</el-button>
                        <template>
                            <el-table :data="onlyTableList" style="width: 100%" border>
                                <el-table-column type='index'></el-table-column>
                                <el-table-column prop="attr_name" label="参数名称" width="1100">
                                </el-table-column>
                                <el-table-column label="操作" width="276">
                                    <template slot-scope='scope'>
                                        <el-button type="primary" icon="el-icon-edit" @click="editAttr(scope.row)">编辑</el-button>
                                        <el-button type="danger" icon="el-icon-delete" @click="deleteAttr(scope.row)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </el-tab-pane>
                </el-tabs>
            </template>
        </el-card>
        <!-- 动态参数弹框 -->
        <el-dialog :title="'添加'+titleText" :visible.sync="attrdialogVisible" width="30%">
            <el-form :model="addForm" :rules="addFormrules" ref="form" label-width="100px" class="demo-ruleForm">
                <el-form-item label="名称" prop="attr_name">
                    <el-input v-model="addForm.attr_name"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="attrdialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addParams">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑弹框 -->
        <el-dialog :title="'编辑'+titleText" :visible.sync="editdialogVisible" width="30%">
        <el-form :model="editForm" :rules="editFormrules" ref="editFormRef" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="attr_name">
                <el-input v-model="editForm.attr_name"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="editdialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editParams">确 定</el-button>
        </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            categoriseList:[],
            cateSelected:[],// 选择分类的id数组
            cateCascader:{
                value:'cat_id',
                label:'cat_name',
                children:'children'
            },
            activeName:'many',
            manyTableList:[],
            onlyTableList:[],
            attrdialogVisible:false,
            titleText:'动态属性',
            addForm:{
                attr_name:''
            },
            addFormrules:{
                attr_name:[
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ]
            },
            editdialogVisible:false,
            editForm:[],
            editFormrules:{
                attr_name:[
                    { required: true, message: '请输入名称', trigger: 'blur' },
                    { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
                ]
            }
        }
    },
    created() {
        this.getCategorise()
    },
    computed: {
        // 计算属性
        isBtnDisabled() {
            if(this.cateSelected.length != 3) {
                return true
            } else {
                return false
            }
        }
    },
    methods:{
        async getCategorise() {
            let {data : res} = await this.$http.get('categories',{type:3})
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            this.categoriseList = res.data
        },
        CateChange() {
            // 选择三级分类发送ajax
           this.getParamsList() 
        },
        handleClick(tab,event) {
            this.getParamsList()
        },
        async getParamsList() {
            // console.log(this.cateSelected)
            if(this.cateSelected.length < 3) {
                this.cateSelected = []
                return
            }
            // console.log(this.cateSelected)
            let id = this.cateSelected[2]
            let {data : res} = await this.$http.get(`categories/${id}/attributes`,{
                params:{sel:this.activeName}
            })
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            res.data.forEach(item => {
                item.attr_vals = item.attr_vals?item.attr_vals.split(" "):[]
                item.inputVisible = false
                item.inputValue = ''
            })
            if(this.activeName == 'many') {
                this.manyTableList = res.data
            } else {
                this.onlyTableList = res.data
            }
        },
        showAddAttr() {
            if(this.activeName == 'many') {
                this.titleText = '动态参数'
            } else {
                this.titleText = '静态属性'
            }
            this.attrdialogVisible = true
        },
        addParams() {
            this.$refs.form.validate(async valid => {
                if(!valid) return;// 预验证不成功
                let id = this.cateSelected[2]
                let {data : res} = await this.$http.post(`categories/${id}/attributes`,{
                    attr_name:this.addForm.attr_name,
                    attr_sel:this.activeName
                })
                if(res.meta.status != 201) return this.$message.error(res.meta.msg)
                this.getParamsList()
                this.attrdialogVisible = false
            })
        },
        async editAttr(data){
            // console.log(data)
                let {data : res} = await this.$http.get(`categories/${data.cat_id}/attributes/${data.attr_id}`)
                if(res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.editForm = res.data
                this.editdialogVisible = true
            
        },
        async deleteAttr(data){
            let {data : res} = await this.$http.delete(`categories/${data.cat_id}/attributes/${data.attr_id}`)
            // console.log(res)
            if(res.meta.status != 200) return this.$message.error(res.meta.msg)
            this.editForm = res.data
            this.getParamsList()

        },
        editParams() {
            this.$refs.editFormRef.validate(async valid => {
                if(!valid) return;
                let id = this.editForm.attr_id
                let cid = this.editForm.cat_id
                let {data : res} = await this.$http.put(`categories/${cid}/attributes/${id}`,this.editForm)
                // console.log(res)
                if(res.meta.status != 200) return this.$message.error(res.meta.msg)
                this.editForm = res.data
                this.getParamsList()
                this.editdialogVisible = false
            })
        },
        handleInputConfirm(data) {
            if(data.inputValue == '') {
                data.inputVisible = false
                data.inputValue = ''
                return;
            }
            this.setVals(data)     
        },
        async setVals(data) {
            let id = this.cateSelected[2]
            data.attr_vals.push(data.inputValue)
            let {data : res} = await this.$http.put(`categories/${id}/attributes/${data.attr_id}`,{
                attr_name:data.attr_name,
                attr_sel:data.attr_sel,
                attr_vals:data.attr_vals.join(" ")
            })
        },
        del(index,data) {
            data.attr_vals.splice(index,1)
            this.setVals(data)
        },
        showInput(data) {
            data.inputVisible = true
            // 获取文本框焦点
            this.$nextTick(_ => {
                this.$refs.saveTagInput.$refs.input.focus();
            });
        }
    }
}
</script>

<style lang="less" scoped>
                                                                                                                                                                                                             
</style>

